<template>
  <div>
    <a-modal title="Case导入" v-model="modalVisible" width="90%" @ok="handleOk" @cancel="handleCancel">
      <a-tabs type="card" size="large" v-model="activeKey">
        <!-- 需求详情tab -->
        <a-tab-pane key="0" :forceRender="true">
          <span slot="tab"><a-icon type="file-text" />需求概要</span>
          <demand-info-tab ref="demandInfo" :demandInfo="caseImportInfo.demand"></demand-info-tab>
        </a-tab-pane>
        <!-- 非功能需求tab -->
        <a-tab-pane key="1" :forceRender="true">
          <span slot="tab"><a-icon type="file-markdown" />非功能需求</span>
          <non-functional-demand-tab ref="nonFunc" :nonFunction="caseImportInfo.nonfunc"></non-functional-demand-tab>
        </a-tab-pane>
        <a-tab-pane v-for="(body, index) in caseImportInfo.body" :key="index + 2" :forceRender="true">
          <span slot="tab"><a-icon type="pushpin" />交易-{{ index + 1 }}</span>
          <trans-body-tab :ref="'trans' + index" :body="body"></trans-body-tab>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import DemandInfoTab from './tabs/DemandInfoTab.vue'
import NonFunctionalDemandTab from './tabs/NonFunctionalDemandTab.vue'
import TransBodyTab from './tabs/TransBodyTab.vue'
import { uploadCaseExcel } from '@/api/pf_bank/case/case'
export default {
  name: 'caseImport',
  components: {
    DemandInfoTab,
    NonFunctionalDemandTab,
    TransBodyTab
  },
  props: {
    showModal: {
      type: Boolean
    },
    info: {
      type: Object
    }
  },
  data() {
    return {
      activeKey: '0',
      modalVisible: this.showModal,
      caseImportInfo: {
        demand: {},
        nonfunc: {},
        body: []
      }
    }
  },
  watch: {
    showModal(newVal, oldVal) {
      this.modalVisible = newVal
    },
    info(newVal, oldVal) {
      this.caseImportInfo = newVal
      //日期转换
      if (this.caseImportInfo.demand.expectedDate) {
        this.caseImportInfo.demand.expectedDate = moment(this.caseImportInfo.demand.expectedDate, 'YYYY-MM-DD')
      }
      if (this.caseImportInfo.demand.expectedOperationDate) {
        this.caseImportInfo.demand.expectedOperationDate = moment(this.caseImportInfo.demand.expectedDate, 'YYYY-MM-DD')
      }
    }
  },
  methods: {
    //验证子组件表单的方法，子组件所有表单验证通过后上传文件
    handleOk() {
      let flag = this.$refs.demandInfo.validateDemandInfoForm()
      if (flag != '-1') {
        this.activeKey = flag
      } else {
        let funFlag = this.$refs.nonFunc.validateNonFunc()
        if (funFlag != '-1') {
          this.activeKey = funFlag
        } else {
          //此处应该验证交易sheet？？
          for (let i = 0; i < this.caseImportInfo.body.length; i++) {
            let transFlag = this.$refs['trans' + i][0].valiteTransBody()
            if (!transFlag) {
              this.activeKey = i + 2
            } else {
              //验证通过后这些excel文件的保存和新建交易的工作
              uploadCaseExcel(this.caseImportInfo).then(res => {
                if (res.code == 200) {
                  this.$message.success('excel文件导入成功!')
                  this.$emit('ok', res.result)
                } else {
                  this.$message.error('excel文件导入失败!')
                }
              })
            }
          }
        }
      }
    },
    
    handleCancel() {
      this.$emit('cancel', false)
    }
  }
}
</script>

<style scoped lang="less"></style>
